<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> -->
    <title>疫情首页</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #10AEB5;
        }
        .header {
            position: fixed;
            font-size: 16px;
            width: 100%;
            height: 50px;
            
            border-bottom:1px solid gray;
            background-color:#FFFFFF;
            display: flex;
            justify-content: space-evenly;
            line-height: 45px;
        }
        .list{
            padding-bottom: 5px;
        }
        .list:hover{
            width: 65px;
            height: 35px;
            border-bottom: 5px solid #3CBDC3;
            color:#3CBDC3 ;
            font-weight: 700;
        }
       .container{
           margin: 0 auto;
           width: 770px;
        
           background-color: #FFFFFF;
           padding-top: 70px;
           padding-left: 20px;
           padding-right: 20px;
       }    
      .title_one{
          font-size: 16px;
      }
      .title_two{
          font-size: 13px;
          color: #999999;
      }
    .view_table{
     
        width: 100%;
        border-collapse: separate;
        vertical-align: middle;
    }
    .table_list{
        font-size:12px ;
        color: #555555;
        font-weight: 700;
    }
    .table_list :nth-child(1){
        text-align: left;
        text-indent: 2em;
    }
    .table_list th {
        width: 25px;
        height: 33px;
        background-color: #F5F6F7;
    }
    .list_info td {
        font-size:13px ;
        width: 25px;
        height: 30px;
        background-color: #F5F6F7;
        text-align: center;
    }
   .list_info .haha{
        background-color: #00BEC9;
        font-size: 13px;
        color:#FFFFFF ;
        font-weight: 700;
        border-radius: 5px;
        text-align: left;
        text-indent: 3em;
    }
    </style>
</head>

<body>

    <div class="header">
         <span class="list">国内疫情</span>
         <span class="list">国外疫情</span>
         <span class="list">实时播报</span>
    </div>
 
    <div class="container">
        
        <span class="title_one">国内各地地区疫情统计汇总</span>
        <br>
        <span class="title_two">7:00-10:00为更新高峰,数据如果滞后敬请谅解</span>
        <br>
        <br>
        <table  class="view_table" >
            
            <thead>
                <tr class="table_list">
                    <th>地区</th>
                    <th>新增</th>
                    <!-- <th>现有</th> -->
                    <th>累计</th>
                    <th>治愈</th>
                    <th>死亡</th>
                </tr>

            </thead>

            <tbody>
                <!-- <tr class="list_info">
                    <td class="haha">福建</td>
                    <td>164</td>
                    <td>1933</td>
                    <td>1541</td>
                    <td>1</td>
                </tr> -->
               {{result}}
            </tbody>


        </table>
   
   
   
   
   
   
    </div>




</body>

</html>